<template>
	<view>
		<view class="images">
			<view class="school">
				江西软件职业技术大学
			</view>
			<u-tabs :list="list1" @click="click" :scrollable="false" lineColor="#ffffff" :lineWidth="40" :lineHeight="2"
				activeColor="color='#ffffff'" inactiveColor="color='#ffffff'"></u-tabs>
		</view>
		<view class="rank">
			<view class="rank-list" v-for="(user,i) in rank_time" :key="i">
				<sapn class="no" style="font-size: 18px;line-height: 45rpx;">{{i+1}}</sapn>
				<image :src="user.url_image" mode=""></image>
				<span class="name">


					<u--text mode="name" :text="user.name" format="encrypt"></u--text>
				</span>
				<span class="time">{{user.score}}</span>
				<view class="time1">积分</view>
			</view>

			<uni-load-more :status="status" :icon-size="14" :content-text="contentText" />
		</view>



		<view class="mine">
			<view>{{my_no}}</view>
			<view class="mine_middle">
				
				
				<u--image :src="my_urlImage" shape="circle" width="80px" height="80px"  mode=""></u--image>
				<view>
					<u--text mode="name" :text="my_name" format="encrypt"></u--text>
				</view>
			</view>

			<view >{{myscore}}积分</view>
		
		</view>



	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				list1: [{
					name: '学期排名',
				}, {
					name: '周排名'
				}],
				rank_time: [],
				my_no: "666", //我的排名
				my_name: "肖艹西",
				my_urlImage: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13931495579%2F641.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto",
				myscore: "6666",
				dakaiTestVo: {
					max: 99999,
					offset: 0
				},
				reload: false,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中',
					contentnomore: '我是有底线的~'
				},


			}
		},

		computed: {
			...mapState(['userinfo'])
		},

		onPullDownRefresh() {
			this.dakaiTestVo.max = 9999
			this.dakaiTestVo.offset = 0
			this.rank_time = []
			this.init();
			uni.stopPullDownRefresh();
		},


		onReachBottom() {
			// if (this.totalCount > this.message.length) {
			// 	this.status = 'loading';
			// 	setTimeout(() => {
			// 		console.log("我是定时器");
			// 		this.Page.pageIndex++
			// 		this.init(); //执行的方法
			// 	}, 1000)
			// 	console.log("我比定时器先执行");
			// } else { //停止加载
			// 	this.status = 'noMore'
			// }
			this.status = 'loading';
			setTimeout(() => {
				this.init()
			}, 1000)


		},

		methods: {

			click(item) {
				console.log('item', item);
			},
			async init() {

				let data = await uni.$u.http
					.post('/app/socre/list', this.dakaiTestVo)

				if (data.code == 0) {
					console.log(data.data);
					if (data.data != null) {
						this.my_no = data.data.myRank
						this.my_name = this.userinfo.reallyName
						this.my_urlImage = this.userinfo.imageUrl
						this.myscore = data.data.mysocre
						this.rank_time = this.rank_time ? this.rank_time.concat(data.data.list) : data.data.list
						this.dakaiTestVo.offset = data.data.offset
						this.dakaiTestVo.max = data.data.min
						this.status = 'more'
					} else {
						this.reload = false;
						this.status = 'noMore'
					}
				}



			}
		},
		onLoad() {

			this.init();

		}
	}
</script>

<style>
	.images {
		width: 100%;
		height: 450rpx;
		background: no-repeat url(https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/other/study_rank.png);
		background-size: 100%;
	}

	.images image {
		width: 100%;
	}

	.school {
		padding-top: 15%;
		padding-left: 26%;
		color: #f3f3f3;
		font-weight: 700;
		font-size: 38rpx;
		margin-bottom: 21%;
	}

	.rank {
		width: 92%;
		height: 100%;
		position: absolute;
		top: 434rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding-left: 8%;
		padding-top: 4%;
	}

	.rank-list {
		position: relative;
		width: 100%;
		height: 10%;
		margin-top: 2%;
	}

	image {
		width: 90rpx;
		height: 90rpx;
		border-radius: 45rpx;
		margin-left: 11%;
		margin-right: 4%;
	}

	.time {
		position: absolute;
		display: inline-block;
		right: 125rpx;
		top: 10rpx;
		color: #519259;
		font-size: 21px;
		font-weight: bold;
	}

	.name,
	.no {
		position: absolute;
		top: 28rpx;
		font-size: 18px;
		line-height: 70rpx;

	}

	.mine {
		box-shadow: -1px -10px 10px #cacaca;
		position: fixed;
		bottom: 0;
		width: 84%;
		height: 10%;
		/* padding-left: 8%; */
		padding: 0 8%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.mine_middle
	{
		display: flex;
			flex-direction: row;
				align-items: center;
				padding-right: 200rpx;
	}



	.img {
		width: 90rpx;
		height: 90rpx;
		margin-top: 2%;
		border-radius: 45rpx;
		margin-left: 12%;
		margin-right: 4%;
	}

	.time1 {
		position: absolute;
		display: inline-block;
		right: 60rpx;
		top: 28rpx;
	}

	.lh {
		line-height: 70rpx;
	}
</style>
